<template>
  <div ref="cavace"></div>
</template>

<script>
import * as HTREE from "three";
export default {
  mounted() {
    //创建一个场景
    const scene = new HTREE.Scene();
    // 创建 Three.js 渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.cavace.appendChild(renderer.domElement);
    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 10, 20);
    camera.lookAt(scene.position);
    // 添加灯光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
    directionalLight.position.set(0, 1, 1).normalize();
    scene.add(directionalLight);
    //创建地面
    const groundGeometry = new THREE.PlaneGeometry(100, 100);
    const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x88bb88 });
    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    scene.add(ground);
    // 创建建筑物
    const buildingGeometry = new THREE.BoxGeometry(4, 6, 4);
    const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0xee3333 });
    const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
    building.position.y = 3;
    scene.add(building);
    //渲染循环
    const animate = () => {
      requestAnimationFrame(animate);
      //旋转建筑物
      building.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();
  },
};
</script>

<style>
</style>